'use strict';
import React, {Component} from 'react';

import {
    View,
    Image,
    ImageBackground,
    Dimensions,
    TouchableWithoutFeedback,
    StyleSheet,
    Text,
    TouchableOpacity,
    TextInput,
    ScrollView,
    TouchableHighlight,
    TouchableNativeFeedback,
    Switch,
    StatusBar,
    Animated,
    Easing,
} from 'react-native';

import {connect} from 'react-redux';
import Util from '../../../../core/utils/util';
import NavBar from '../../../../core/component-biz/comp.nav-search-bar';
import {NavigationActions} from 'react-navigation';
import OrderFilterPanel from '../../../../core/component-biz/comp.order-filter-panel';
import {commonActions} from '../../../../actions/index'
import Color from '../../../../core/constant/color';
import IconButton from "../../../../core/component/comp.icon-button";

class MainScene extends React.Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        title: "返回",
        tabBarVisible: false,
        headerTintColor: "white",
        headerStyle: {
            backgroundColor: Color.PRIMARY_COLOR,
            elevation: null
        },
        header: null,
    });

    constructor(props) {
        super(props);
        this.state = {
            isShowMore: false,
            filterAnim: new Animated.Value(0),
            filterRightAnim: new Animated.Value(-Util.getScreenWidth())
        }
    }

    componentDidMount() {
        //发送搜索数据API
        const {searchText} = this.props.navigation.state.params;
        const {dispatch} = this.props;
        dispatch(commonActions.search({
            keyword: searchText,
        })).then((json) => {
            console.log(json, "------>searchResult")
        });
    }

    onPressSearch() {

    }

    genGenderUI(gender) {
        if (gender) {
            const genderUrl = gender == "1" ? require('../../../../img/gender_boy.png') : require('../../../../img/gender_girl.png');
            return (<Image style={styles.genderIcon} source={genderUrl}/>);
        }
    }

    genCityUI(city) {
        return (
            <View style={styles.cityLabel}>
                <Text style={styles.userCity}>{city}</Text>
            </View>
        );
    }

    onPressJumpToSkillDetail(item) {
        const {navigate} = this.props.navigation;
        //跳转到搜索列表
        navigate('SkillDetailScene', {
            title: "技能资质",
            skillInfo: item,
        })
    }

    genResultListUI() {
        const {searchService} = this.props;
        console.log(searchService, '------->aaa')
        const listUI = searchService.map((item, index) => {
            return (
                <TouchableOpacity key={`result-item-${index}`} style={styles.resultItemContainer}
                                  onPress={this.onPressJumpToSkillDetail.bind(this, item)}>
                    <View style={styles.resultItem}>
                        <View style={styles.leftPanel}>
                            <Image style={styles.leftImage} source={{uri: Util.substrImageUrl(item.touxiang_url)}}/>
                        </View>
                        <View style={styles.midPanel}>
                            <Text style={styles.topTitleText}>{item.nick_name}</Text>
                            <View style={styles.midPanelMid}>
                                <View style={styles.userGenderGroup}>
                                    {this.genGenderUI(item.gender)}
                                    <Text style={styles.age}>{item.age}</Text>
                                </View>
                                {this.genCityUI(item.city)}
                            </View>
                            <Text style={styles.userSkillName}>{item.skill_name}</Text>
                        </View>
                        <View style={styles.rightPanel}>
                            <Text style={styles.lastTime}>{item.times}</Text>
                            <View style={styles.priceArea}>
                                <Text style={styles.priceType}>¥</Text>
                                <Text style={styles.priceText}>{item.price}元/{item.unit}</Text>

                            </View>
                            <Text style={styles.orderNumber}>接单{item.orderNumber}次</Text>

                        </View>
                    </View>
                    <View style={styles.splitLine}/>
                </TouchableOpacity>
            );
        })

        return listUI;
    }

    onPressBack = () => {
        this.props.navigation.dispatch(
            NavigationActions.reset({
                index: 1,
                actions: [
                    NavigationActions.navigate({routeName: 'MainSearchScene'}),
                    NavigationActions.navigate({routeName: 'MainScene'}),
                ],
            }),
        )
    }


    onPressSearchLabel(search) {
    }

    genSearchListItemUI(keyPre, item, index) {
        return (
            <TouchableOpacity key={`${keyPre}-${index}`} style={styles.searchLabel}
                              onPress={this.onPressSearchLabel.bind(this, item.name)}>
                <Text style={styles.searchLabelText}>{item.name}</Text>
            </TouchableOpacity>
        );
    }

    genOtherSearchListUI(list) {

        if (list && list.length > 0) {
            return (
                <View style={styles.otherSearchList}>
                    {list.map((item, index) => this.genSearchListItemUI('other-search-list', item, index))}
                </View>
            );
        } else {
            return (
                <View style={styles.otherSearchList}>
                    <Text style={styles.searchEmptyTip}>无历史记录</Text>
                </View>
            );
        }
    }


    genSearchFoundListUI(item, index) {
        return (
            <View key={`filter-type-${index}`} style={styles.otherSearchPanel}>
                <View style={styles.searchTitleView}>
                    <Text style={styles.searchTitleText}>{item.title}</Text>
                </View>
                {this.genOtherSearchListUI(item.list)}
            </View>
        );
    }

    genMorePanelUI() {
        const {isShowMore, filterAnim, filterRightAnim} = this.state
        if (isShowMore) {

            const filterList = [
                {
                    title: "热门分类",
                    list: [
                        {name: '不限'},
                        {name: '王者荣耀'},
                        {name: 'LOL陪玩'},
                        {name: '寻觅美食'},
                        {name: '购物逛街'},
                        {name: '清晨叫醒'},
                        {name: '客户关系'},
                    ]
                }, {
                    title: "游戏陪玩",
                    list: [
                        {name: '王者荣耀'},
                        {name: 'LOL陪玩'},
                    ]
                }, {
                    title: "线上聊天",
                    list: [
                        {name: '声优聊天'},
                        {name: '美音叫醒'},
                    ]
                }, {
                    title: "线下活动",
                    list: [
                        {name: '逛街'},
                        {name: '旅游'},
                        {name: '公关'},
                        {name: '寻觅美食'},
                    ]
                }, {
                    title: "性别",
                    list: [
                        {name: '不限'},
                        {name: '男'},
                        {name: '女'},
                    ]
                }, {
                    title: "价格区间",
                    list: [
                        {name: '不限'},
                        {name: '0~30'},
                        {name: '30~50'},
                        {name: '50~100'},
                        {name: '100~300'},
                        {name: '300~500'},
                        {name: '大于500'},
                    ]
                },
            ]

            return (
                <View style={styles.showMorePanelMaskContainer}>
                    <TouchableWithoutFeedback onPress={this.onPressHideShowMore}>
                        <Animated.View style={[styles.showMorePanelMask, {opacity: filterAnim}]}/>
                    </TouchableWithoutFeedback>
                    <Animated.View style={[styles.showMoreScrollView, {right: filterRightAnim}]}>
                    <Animated.ScrollView >
                        <View style={styles.showMorePanel}>
                            <View style={styles.showTopHead}/>
                            {filterList.map((item, index) => this.genSearchFoundListUI(item, index))}
                        </View>
                    </Animated.ScrollView>

                        <View style={styles.bottomBar}>
                            <IconButton style={styles.btnReset} textStyle={styles.btnResetText} title="重置"/>
                            <IconButton style={styles.btnOK} textStyle={styles.btnOKText} title="确定"/>
                        </View>
                    </Animated.View>
                </View>
            );
        }
    }

    onPressShowMore = () => {
        const {isShowMore} = this.state
        if (isShowMore) {
            this.onPressHideShowMore()
        } else {
            this.onPressShowShowMore()
        }
    }

    onPressShowShowMore = () => {

        this.setState({
            isShowMore: true,
        });

        this.state.filterAnim = new Animated.Value(0)
        this.state.filterRightAnim = new Animated.Value(-Util.getScreenWidth())
        Animated.parallel([
            Animated.timing(
                this.state.filterAnim,
                {
                    toValue: 1,
                    duration: 250,
                }
            ),
            Animated.timing(this.state.filterRightAnim, {
                toValue: 0,
                duration: 250,
            })]).start();
    }

    onPressHideShowMore = () => {
        Animated.parallel([
            Animated.timing(
                this.state.filterAnim,
                {
                    toValue: 0,
                    duration: 250,
                }
            ),
            Animated.timing(this.state.filterRightAnim, {
                toValue: -Util.getScreenWidth(),
                duration: 250,
            })
        ]).start((finished) => {
            if (finished) {
                this.setState({
                    isShowMore: false,
                });
            }
        })
    }

    render() {
        const {isShowMore} = this.state;
        const {searchText} = this.props.navigation.state.params
        return (
            <View style={styles.container}>
                {this.genMorePanelUI()}
                <NavBar onBack={this.onPressBack} searchText={searchText} showBackButton
                        navigation={this.props.navigation} readOnly={false}
                        onRightPress={this.onPressSearch.bind(this)}/>
                <OrderFilterPanel isShowMore={isShowMore} onPressShowMore={this.onPressShowMore}/>
                <ScrollView>
                    {this.genResultListUI()}
                </ScrollView>
            </View>
        )
    }

}


const
    styles = StyleSheet.create({
        container: {
            flex: 1,
            backgroundColor: 'white',
        },
        scrollView: {},
        resultItemContainer: {
            padding: 8,
        },
        splitLine: {
            height: Util.getRealPixel(1),
            backgroundColor: '#ECECEC',
            marginTop: 4,
            marginBottom: 4,
            marginLeft: 140,
        },
        resultItem: {
            flexDirection: 'row',
            // borderWidth:1,
            // borderColor:'red',

        },
        leftPanel: {
            width: 100,
            height: 100,

        },
        leftImage: {
            width: 100,
            height: 100,
            resizeMode: 'contain',
            borderRadius: 5,
        },
        midPanel: {
            flex: 1,
            padding: 8,
        },
        midPanelMid: {
            flexDirection: 'row',
            alignItems: 'center',
            paddingTop: 16,

        },
        rightPanel: {
            height: 100,
            padding: 8,
            paddingBottom: 0,
            alignItems: 'flex-end',
        },
        topTitle: {},
        topTitleText: {
            fontSize: 16,
        },
        bottomPanel: {
            flex: 1,
            alignItems: 'flex-end',
            justifyContent: 'flex-end',
        },
        lastTime: {
            fontSize: 12,
            color: '#909090',
        },
        orderNumber: {
            fontSize: 12,
            color: '#909090',
        },
        priceArea: {
            flexDirection: 'row',
            alignItems: 'flex-end',
            paddingTop: 16,
            paddingBottom: 16,
        },
        priceType: {
            color: '#ED551F',
            fontSize: 14,
        },
        priceText: {
            color: '#ED551F',
            fontSize: 16,
        },
        userInfoArea: {
            flexDirection: 'row',
            paddingTop: 8,
            paddingBottom: 8,
        },
        userNickName: {
            fontSize: 14,
            color: '#909090',
        },
        userAge: {
            fontSize: 14,
            color: '#909090',
        },
        userCity: {
            fontSize: 14,
            color: '#909090',
        },
        userGender: {
            fontSize: 14,
            color: '#909090',
        },
        cityLabel: {},
        cityLabelGirl: {
            backgroundColor: '#ec7280'
        },
        cityLabelBoy: {
            backgroundColor: '#99ccff'
        },
        userGenderGroup: {
            borderWidth: 1,
            borderColor: '#FF0055',
            minWidth: 30,
            borderRadius: 4,
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'center',
            paddingLeft: 4,
            paddingRight: 4,
            marginRight: 4,
        },
        age: {
            color: '#FF0055',
            fontSize: 12,
            backgroundColor: 'transparent',
        },
        genderIcon: {
            width: 10,
            height: 10,
        },
        userSkillName: {
            fontSize: 16,
            color: '#909090',
            marginTop: 16,
        },
        showMorePanelMaskContainer: {
            position: 'absolute',
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            zIndex: 1,
        },
        showMorePanelMask: {
            backgroundColor: 'rgba(0,0,0,0.7)',
            position: 'absolute',
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            zIndex: 100,
        },
        showMoreScrollView: {
            position: 'absolute',
            right: 0,
            top: 0,
            width: Util.getScreenWidth() - 60,
            height: '100%',
            borderWidth: 1,
            backgroundColor: 'white',
            zIndex: 999,
        },
        showMorePanel: {
            backgroundColor: 'white',

        },
        showTopHead: {
            height: 20,
            backgroundColor: Color.PRIMARY_COLOR,
        },
        otherSearchPanel: {},
        searchTitleView: {
            height: 30,
            flexDirection: 'row',
            alignItems: 'center',
            marginLeft: 8,
            marginTop: 8,
        },
        searchTitleText: {
            fontSize: 14,
            flex: 1,
            color: '#383838',
        },
        btnHistoryDel: {
            width: 20,
            height: 20,
            marginRight: 8,
        },
        btnHistoryDelImage: {
            width: 20,
            height: 20,
        },
        otherSearchList: {
            marginLeft: 8,
            marginRight: 8,
            flexDirection: 'row',
            flexWrap: 'wrap'
        },
        searchEmptyTip: {
            fontSize: 14,
            flex: 1,
            color: '#383838',
            textAlign: 'center',
        },
        searchLabel: {
            borderRadius: 16,
            padding: 8,
            paddingLeft: 16,
            paddingRight: 16,
            backgroundColor: '#F5F5F5',
            marginRight: 8,
            marginBottom: 8,
        },
        searchLabelText: {
            color: '#383838',
            fontSize: 14,
        },
        bottomBar:{
            flexDirection:'row',
            height:40,
        },
        btnReset:{
            flex:1,
            backgroundColor:'#DDD9F9',
            borderRadius:0,
        },
        btnResetText:{
            color:Color.PRIMARY_COLOR,
            fontSize:14,
        },
        btnOK:{
            flex:1,
            borderRadius:0,
            backgroundColor:Color.PRIMARY_COLOR,
        },
        btnOKText:{
            color:'white',
            fontSize:14,
        },
    });

export default connect(
    (state, props) => {
        console.log('--------->searchService', state)
        return ({
            searchService: state.common.searchService,
        });
    })
(MainScene);